{% extends "xhs/layout.html" %}

{% block title %}小红书数据管理系统 - 数据导出{% endblock %}

{% block page_title %}数据导出{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 offset-lg-2">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-file-export text-primary"></i> 导出小红书数据
            </div>
            <div class="card-body">
                <form method="post" action="/export">
                    <div class="alert alert-info mb-4">
                        <h5><i class="fas fa-info-circle"></i> 当前数据状态</h5>
                        <div class="row mt-3">
                            <div class="col-md-4 text-center mb-3">
                                <div class="h1 text-primary">{{ stats.collection_tasks|default(0) }}</div>
                                <div class="text-muted">采集任务</div>
                            </div>
                            <div class="col-md-4 text-center mb-3">
                                <div class="h1 text-success">{{ stats.notes|default(0) }}</div>
                                <div class="text-muted">小红书笔记</div>
                            </div>
                            <div class="col-md-4 text-center mb-3">
                                <div class="h1 text-danger">{{ stats.comments|default(0) }}</div>
                                <div class="text-muted">笔记评论</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 text-center">
                                <div class="h1 text-info">{{ stats.users|default(0) }}</div>
                                <div class="text-muted">用户数据</div>
                            </div>
                            <div class="col-md-6 text-center">
                                <div class="h1 text-warning">{{ stats.locations|default(0) }}</div>
                                <div class="text-muted">位置数据</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>选择要导出的数据</label>
                        <div class="alert alert-light">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="export_all" checked>
                                <label class="custom-control-label" for="export_all"><strong>全选</strong></label>
                            </div>
                            <hr>
                            <div class="row mt-2">
                                <div class="col-md-4">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input export-item" id="export_tasks" name="export_items" value="collection_tasks" checked>
                                        <label class="custom-control-label" for="export_tasks">采集任务</label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input export-item" id="export_notes" name="export_items" value="notes" checked>
                                        <label class="custom-control-label" for="export_notes">笔记数据</label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input export-item" id="export_comments" name="export_items" value="comments" checked>
                                        <label class="custom-control-label" for="export_comments">评论数据</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-4">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input export-item" id="export_users" name="export_items" value="users" checked>
                                        <label class="custom-control-label" for="export_users">用户数据</label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input export-item" id="export_locations" name="export_items" value="locations" checked>
                                        <label class="custom-control-label" for="export_locations">位置数据</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i> 导出提示
                        <ul class="mb-0 mt-2">
                            <li>导出数据可能需要较长时间，请耐心等待</li>
                            <li>如果数据量过大，可能会导致浏览器卡顿或超时</li>
                            <li>建议定期导出数据作为备份</li>
                            <li>导出的数据可用于后续导入</li>
                        </ul>
                    </div>
                    
                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-primary btn-lg" id="export-btn">
                            <i class="fas fa-download"></i> 开始导出
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 全选/取消全选
    $('#export_all').change(function() {
        $('.export-item').prop('checked', $(this).prop('checked'));
        updateExportButton();
    });
    
    // 单项选择时更新全选状态
    $('.export-item').change(function() {
        var allChecked = $('.export-item:checked').length === $('.export-item').length;
        $('#export_all').prop('checked', allChecked);
        updateExportButton();
    });
    
    // 更新导出按钮状态
    function updateExportButton() {
        var anyChecked = $('.export-item:checked').length > 0;
        $('#export-btn').prop('disabled', !anyChecked);
    }
    
    // 初始化按钮状态
    updateExportButton();
</script>
{% endblock %} 